<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset" style="border-radius: 50px;">
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">培训时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="date" name="date" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">讲师</label>
                            <div class="layui-input-inline">
                                <input type="text" name="teacher" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">培训标签</label>
                            <div class="layui-input-inline">
                                <select name="type" lay-filter="aihao">
                                    <option value="">请选择岗位类型</option>
                                    <option value="1">安全体系类</option>
                                    <option value="2">生成技能类</option>
                                    <option value="3">人员管理类</option>
                                    <option value="4">职业素质类</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 重 置</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <!-- echars图表 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card-body">
                    <!--图表一和图表二-->
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
                                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="fa fa-pie-chart"></i>统计讲师课时费用支出</div>
                                <div class="layui-card-body">
                                    <div id="main" style="width: 100%; height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card" style="border-radius: 20px; border: 2px solid buttonface; box-shadow: 0px 0px 10px 3px gainsboro;">
                                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="fa fa-pie-chart">统计每年各类培训费用支出</i></div>
                                <div class="layui-card-body">
                                    <div id="main1" style="width: 100%; height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="padding:20px;">

            <!--图表三-->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12 ">
                    <div class="layui-card-body">
                        <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
                            <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="	fa fa-line-chart"></i>近三年培训人数统计情况</div>
                            <div class="layui-card-body">
                                <div id="main2" style="width: 100%; height: 600px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','laydate','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            echarts = layui.echarts;
        laydate.render({
            elem: '#date'
        })

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            return false;
        });

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('main'), 'walden');

        var optionRecords = {
            title: {
                text: '根据各类课程人数统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 700, name: '王老师:56000(20%)' },
                        { value: 750, name: '吴老师:60000(21.43%)' },
                        { value: 735, name: '圣老师:59000(21.07)' },
                        { value: 700, name: '徐老师:56000（20%）' },
                        { value: 600, name: '李老师:49000(17.5%)' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        echartsRecords.setOption(optionRecords);

        /* 柱状图 */
        var main1Records = echarts.init(document.getElementById('main1'), 'walden');

        var optionMain1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['徐老师', '李老师', '王老师', '圣老师', '吴老师']
            },
            series: [
                {
                    name: '2019',
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744]
                },
                {
                    name: '2020',
                    type: 'bar',
                    data: [19325, 23438, 31000, 121594, 134141]
                }
            ]
        };

        main1Records.setOption(optionMain1);



    });
</script>

</body>
</html>
